<template lang="pug">
div
  nav-div
  .flex.jsb.ae
    .ui.header 活动列表
    .ui.button(@click="newCampaign") 新建
  table.ui.table
    thead
      tr
        th ID
        th 名称
        th 描述
        th.collapsing 类型
        th 优惠券
        th 有效期
        th 是否开启
        th 操作
    tbody
      tr(v-for="campaign in campaigns | orderBy 'id' -1", track-by="$index")
        template(v-if="campaignsEdit.includes(campaign)")
          td {{campaign.id}}
          td
            .ui.input
              input(v-model="campaign.name")
          td
            .ui.input
              input(v-model="campaign.description")
          td.collapsing
            obj-single-select(
              placeholder="类型",
              :options="helper.campaignCategoryArray",
              key="value",
              label="text",
              :value.sync="campaign.category",
              type="value",
            )
          td
            coupon-select(
              :coupon.sync="campaign.coupon_template",
            )
          td
            .flex.dc.jsb.ac
              date-picker(
                style="width: 145px;",
                :unix.sync="campaign.valid_after",
                placeholder="开始时间",
              )
              date-picker(
                style="width: 145px;",
                :unix.sync="campaign.valid_before",
                placeholder="结束时间",
              )
          td
            input#campaign-activated-true(type='radio', :value='true', v-model="campaign.activated")
            label(for='campaign-activated-true', style="margin: 0 5px;") 是
            br
            input#campaign-activated-false(type='radio', :value='false', v-model="campaign.activated")
            label(for='campaign-activated-false', style="margin: 0 5px;") 否
          td
            .ui.button(@click="saveCampaign(campaign)") 保存
            //- .ui.button.negative 取消
        template(v-else)
          td {{campaign.id}}
          td {{campaign.name}}
          td {{campaign.description}}
          td {{campaign.category | campaignCategory}}
          td {{campaign.coupon_template.name}}
          td {{campaign.valid_after | unixToDate 'YYYY-MM-DD HH:mm:ss'}} 至 {{campaign.valid_before | unixToDate 'YYYY-MM-DD HH:mm:ss'}}
          td {{campaign.activated ? '开启' : '关闭'}}
          td
            .ui.button(@click="editCampaign(campaign)") 编辑
  .flex.jsb.ae
    .ui.header 优惠券模板列表
    .ui.button(@click="newCoupon") 新建
  table.ui.table
    thead
      tr
        th ID
        th 名称
        th 描述
        th 价格
        th 有效期
        th 相对有效期
        th 操作
    tbody
      tr(v-for="coupon in coupons | orderBy 'id' -1", track-by="$index")
        template(v-if="couponsEdit.includes(coupon)")
          td {{coupon.id}}
          td
            .ui.input
              input(v-model="coupon.name")
          td
            .ui.input
              input(v-model="coupon.description")
          td
            .ui.input
              input(v-model="coupon.price")
          td
            .flex.dc.jsb.ac
              date-picker(
                style="width: 145px;",
                :unix.sync="coupon.valid_after",
                placeholder="开始时间",
              )
              date-picker(
                style="width: 145px;",
                :unix.sync="coupon.valid_before",
                placeholder="结束时间",
              )
          td
            .ui.input
              input(v-model="coupon.related_expire", type="number")
            label &nbsp;秒
            p(v-if="helper.isAmountValid(coupon.related_expire)") 约为&nbsp;{{coupon.related_expire | durationSeconds}}
          td
            .ui.button(@click="saveCoupon(coupon)") 保存
            //- .ui.button.negative 取消
        template(v-else)
          td {{coupon.id}}
          td {{coupon.name}}
          td {{coupon.description}}
          td {{coupon.price}}
          td {{coupon.valid_after | unixToDate 'YYYY-MM-DD HH:mm:ss'}} 至 {{coupon.valid_before | unixToDate 'YYYY-MM-DD HH:mm:ss'}}
          td
            span(v-if="helper.isAmountValid(coupon.related_expire)") {{coupon.related_expire | durationSeconds}}
            span(v-else) &nbsp;
          td
            .ui.button(@click="editCoupon(coupon)") 编辑
</template>

<script>
import { getCoupons, updateCoupon, createCoupon } from '../../vuex/action'
import NavDiv from '../../modules/nav'
import ObjSingleSelect from '../../modules/select/objSingle'
import CouponSelect from '../../modules/select/coupon'
import DatePicker from '../../modules/date'

export default {
  name: 'coupons',
  components: {
    NavDiv,
    ObjSingleSelect,
    DatePicker,
    CouponSelect,
  },
  vuex: {
    getters: {
      couponsSource: ({ coupon }) => coupon.coupon_templates,
      couponSource: ({ coupon }) => coupon.coupon_template,
      campaignsSource: ({ coupon }) => coupon.campaigns,
      campaignSource: ({ coupon }) => coupon.campaign,
    },
    actions: {
      getCoupons,
      updateCoupon,
      createCoupon,
    }
  },
  data () {
    return {
      coupons: [],
      couponsEdit: [],
      campaigns: [],
      campaignsEdit: [],
    }
  },
  created (){
    this.campaigns = _.cloneDeep(this.campaignsSource)
    this.coupons = _.cloneDeep(this.couponsSource)
  },
  ready () {
    $(this.$el).find('.dropdown').dropdown({
      on: 'hover'
    })
    this.load()
  },
  methods: {
    load(){
      catchError(async () => {
        await this.getCoupons()
      })
    },
    newCoupon (){
      const item = _.cloneDeep(this.couponSource)
      this.couponsEdit.push(item)
      this.coupons.push(item)
    },
    newCampaign (){
      const item = _.cloneDeep(this.campaignSource)
      this.campaignsEdit.push(item)
      this.campaigns.push(item)
    },
    editCampaign(campaign) {
      this.campaignsEdit.push(campaign)
    },
    editCoupon(coupon) {
      this.couponsEdit.push(coupon)
    },
    saveCoupon(coupon) {
      catchError(async () => {
        const data = {
          coupon_template: coupon
        }
        if(coupon.id){
          await this.updateCoupon(data)
        }else{
          await this.createCoupon(data)
        }
        this.couponsEdit.$remove(coupon)
        this.load()
      }, '保存成功')
    },
    saveCampaign(campaign) {
      catchError(async () => {
        const data = {
          campaign,
        }
        if(campaign.id){
          await this.updateCoupon(data)
        }else{
          await this.createCoupon(data)
        }
        this.campaignsEdit.$remove(campaign)
        this.load()
      }, '保存成功')
    },
  },
  watch: {
    campaignsSource: {
      handler (val, old) {
        this.campaigns = _.cloneDeep(val)
      },
      deep: true,
      immediate: true,
    },
    couponsSource: {
      handler (val, old) {
        this.coupons = _.cloneDeep(val)
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style lang="sass" scoped>
</style>
